<template>
    <div class="page borderbox absolute t0 w100">
        <div class="address whiteBg mt10 flex col  p10 pt1 borderbox">
            <div class="flex flexSpaceB vux-1px-b h40">
                <span class="gary">收货人</span>
                <input class="inputCommon" type="text" v-model="addressName" maxlength="30">
            </div>
            <div class="flex flexSpaceB vux-1px-b h40">
                <span class="gary">联系电话</span>
                <input class="inputCommon" type="number" v-model="addressTell" maxlength="11">
            </div>
            <div class="flex flexSpaceB vux-1px-b h40" @click="shopPopup">
                <div>
                    <span class="gary">所在区域</span>
                    <span>{{addressAreas}}</span>
                </div>
                <x-icon type="ios-arrow-forward" size="20"></x-icon>
            </div>
            <div class="vux-1px-b textArea relative">
                <span class="gary absolute t10">详细地址</span>
                <textarea class="w100 h100 fs14 lh16 pt9" cols="30" rows="10" v-model="addressDetail"></textarea>
            </div>
            <div class="flex flexSpaceB h40">
                <span class="gary">设置默认地址</span>
                <check-icon :value.sync="isDefault"></check-icon>
            </div>
        </div>
        <div class="BottonButton vux-1px-t">
            <span @click="conserve">{{addressId?"保存修改":"保存"}}</span>
        </div>

        <mt-popup  v-model="popupVisible" position="bottom" class="bottom" closeOnClickModa="false">
            <p class="h30 flex flexSpaceB">
                <span @click="popupVisible = false">取消</span>
                <span @click="sureAddress">确定</span>
            </p>
           <mt-picker :slots="slots" @change="onValuesChange" class="qq" :visible-item-count="5"></mt-picker>
        </mt-popup>
    </div>
</template>
<script>
import { CheckIcon } from 'vux';
import { isPhoneNum } from 'methods/common';
import { MessageBox,Toast } from 'mint-ui';
import { addAddress,getProvince,getCity,getArea,queryDetailsAddress,editDetailsAddress } from 'request';
export default {
    name:'addAddressDetail',
    data(){
        return {
            isDefault:true,
            addressName:'',
            addressTell:'',
            popupVisible:false,
            addressDetail:'',                       //详细地址
            addressAreas:'',                         //详细县市区
            provinceList:[],                        //省份信息
            provinceName:[],                        //省份名称集合
            provinceCode:[],                        //省份编码合集
            editProvinceCode:'',                    //编辑省份编码
            cityList:[],                            //城市信息
            cityName:[],                            //城市名称合集
            cityCode:[],                            //城市编码合集
            editCityCode:'',                        //编辑城市编码
            areaList:[],                            //县级信息
            areaName:[],                            //县级名称合集
            areaCode:[],                            //县级编码合集
            editAreaCode:'',                        //编辑区编码
            addressList:[],                            //选中的地址列表
            slots: [{
                flex: 1,
                values: [],
                className: 'slot1',
                textAlign: 'center'
            }, {
                divider: true,
                content: '-',
                className: 'slot2'
            }, {
                flex: 1,
                values: [],
                className: 'slot3',
                textAlign: 'center'
            }, {
                divider: true,
                content: '-',
                className: 'slot4'
            }, {
                flex: 1,
                values: [],
                className: 'slot5',
                textAlign: 'center'
            }],
        }
    },
    components:{
        CheckIcon,
    },
    created(){
        //判断如果是编辑操作
        if(this.addressId){
            this.$vux.loading.show({text:'loading'});
            queryDetailsAddress({id: this.addressId}).then(res=>{
                this.$vux.loading.hide();
                if(res.rspCode == '0000'){
                    this.addressName = res.data.contact
                    this.addressTell = res.data.phone
                    this.addressDetail = res.data.address
                    this.isDefault = res.data.isDefault == '0' ? true : false;
                    this.addressAreas = res.data.provinceName + res.data.cityName + res.data.areaName;
                    this.editProvinceCode = res.data.provinceCode
                    this.editCityCode = res.data.cityCode
                    this.editAreaCode = res.data.areaCode
                }
            }).catch(err=>this.$vux.loading.hide())
        }
    },
    computed:{
        addressId(){
            return this.$route.query.id || false;
        },
        goPageIndex(){
            let ind = this.$route.query.type;
            return ind == '0' ? -2 : -1;
        }
    },
    methods:{
        //确定地址选择
        sureAddress(){
            this.popupVisible = false;
            this.addressAreas = this.addressArea;
        },
    //所在地区点击
    shopPopup(){
      this.popupVisible= true;
      // console.log(this.slots[0].values)
      var self = this;
      //获取默认省市区
       getProvince({}).then(
            response => {
              this.provinceList  = Object.assign([], response.data.provinceList)
              // console.log(this.provinceList)
              // 图片加域名
                for( var item of this.provinceList ){
                     this.provinceName.push(item.provinceName)
                     this.provinceCode.push(item.provinceCode)
                    //  console.log(this.provinceName)
                }
                  // console.log(this.provinceName)
                this.slots[0].values = this.provinceName;

                // console.log(this.provinceCode,"11212")
                 getCity({provinceCode:this.provinceCode[0]}).then(
                    response => {
                      this.CityList  = Object.assign([], response.data.cityList)
                      // console.log(this.CityList)

                        for( var item of this.CityList ){
                             this.cityName.push(item.cityName)
                             this.cityCode.push(item.cityCode)
                        }
                        this.slots[2].values = this.cityName;

                        //区
                              getArea({cityCode:this.cityCode[0]}).then(
                                  response => {
                                    this.AreaList  = Object.assign([], response.data.areaList)
                                    // console.log(this.AreaList)

                                      for( var item of this.AreaList ){
                                          this.areaName.push(item.areaName)
                                          this.areaCode.push(item.areaCode)
                                      }
                                      this.slots[4].values = this.areaName;

                                  }
                                  ).catch(
                                    error => console.log(error)
                              );
                        //区
                       this.provinceName= [];
                       this.provinceCode = [];
                       this.cityName = [];
                       this.cityCode = [];
                       this.areaName = [];
                       this.areaCode = [];
                     }
                    ).catch(
                      error => console.log(error)
                );
             }
            ).catch(
              error => console.log(error)
           )
    },
    //省份变化
    provinceChange(){
      // console.log(this.provinceList[this.provinceScroll].provinceCode)
        getCity({provinceCode:this.provinceList[this.provinceScroll].provinceCode}).then(
                    response => {
                      this.CityList  = Object.assign([], response.data.cityList)
                      // console.log(this.CityList)

                        for( var item of this.CityList ){
                             this.cityName.push(item.cityName)
                             this.cityCode.push(item.cityCode)
                        }
                        this.slots[2].values = this.cityName;
                         this.cityName = [];
                        this.cityCode = [];
                    }

             ).catch(
              error => console.log(error)
           )
    },
    //市区变化
     cityChange(){
      // console.log(this.CityList[this.cityScroll].cityCode)
        getArea({cityCode:this.CityList[this.cityScroll].cityCode}).then(
                    response => {
                      this.AreaList  = Object.assign([], response.data.areaList)

                        for( var item of this.AreaList ){
                             this.areaName.push(item.areaName)
                             this.areaCode.push(item.areaCode)
                        }
                         this.slots[4].values = this.areaName;
                         this.areaName = [];
                         this.areaCode = [];
                    }

             ).catch(
              error => console.log(error)
           )
    },
    onValuesChange(picker, values) {
      var self = this;
      //省
      for(var i =0;i<this.slots[0].values.length;i++){
          if(this.slots[0].values[i] == picker.getSlotValue(0)){
              self.provinceScroll = i
              self.provinceChange();
         }
      }
      //市
      for(var i =0;i<this.slots[2].values.length;i++){
        if(this.slots[2].values[i] == picker.getSlotValue(1)){
            self.cityScroll = i
            self.cityChange();
            // return;
       }
      }
      //县
      for(var i =0;i<this.slots[4].values.length;i++){
        if(this.slots[4].values[i] == picker.getSlotValue(2)){
            self.areaScroll = i
            // return;
       }
      }

      this.addressArea = (picker.getSlotValue(0)+picker.getSlotValue(1)+picker.getSlotValue(2)) || '';
    },
    
        //点击保存
        conserve(){
            if(!this.addressDetail || this.addressDetail.length < 5){
                MessageBox('', '详细地址不少于5字');
            }else if(this.addressArea=="" && !this.addressId){
                MessageBox('', '请选择所在地区');
            }else if(!isPhoneNum(this.addressTell)){
                MessageBox('', '请填写正确手机号码');
            }else if(!this.addressName){
                MessageBox('', '请填写收货人');
            }else if(!this.addressId){
                addAddress({
                    contact: this.addressName,
                    address: this.addressDetail,
                    phone: this.addressTell,
                    isDefault: this.isDefault ? 0 : 1,
                    provinceCode: this.provinceList[this.provinceScroll].provinceCode,
                    cityCode: this.CityList[this.cityScroll].cityCode,
                    areaCode: this.AreaList[this.areaScroll].areaCode
                }).then(res=>{
                    if(res.rspCode=="0000"){
                        Toast({ message:'地址保存成功',position:'middle',duration:1000});
                        this.$router.go(this.goPageIndex);
                    }else{
                        MessageBox('', '保存失败');
                    }
                }).catch(err=>console.log(err));
            }else{
                if(this.isDefault){
                    this.isdefault = '0'
                }else{
                    this.isdefault = '1'
                }
                //编辑操作
                editDetailsAddress({
                    id: this.addressId,
                    contact: this.addressName,
                    address: this.addressDetail,
                    phone: this.addressTell,
                    isDefault: this.isdefault,
                    provinceCode: this.provinceList.length != 0 ? this.provinceList[this.provinceScroll].provinceCode : this.editProvinceCode,
                    cityCode: this.provinceList.length != 0 ? this.CityList[this.cityScroll].cityCode : this.editCityCode,
                    areaCode: this.provinceList.length != 0 ? this.AreaList[this.areaScroll].areaCode :this.editAreaCode,
                }).then(res => {
                    if (res.rspCode == "0000") {
                        Toast({ message:"修改成功",position:'middle',duration:1500});
                        this.$router.go(this.goPageIndex);
                    } else {
                        MessageBox("", "提交失败");
                    }
                }).catch(error => console.log(error));
            }
        }
    }
}
</script>
<style lang="less" scoped>
.gary{
    color:#908f94;
    font-size:1.4rem;
}
.vux-x-icon {
  fill: #c7c6cb;
}
.page{
    background:#f6f6f6;
    min-height:100%;
    .inputCommon{
        height:80%;
        font-size:1.6rem;
        text-align: right;
        width:70%;
        margin-right:1rem;
    }
    .address{
        width:94%;
        margin-left:3%;
        border-radius: 1rem;
        padding-top:0.1rem !important;
    }
    .bottom{
      width: 100%;
       .qq{
           width: 100%;
           background-color: #f1f0f0;
          }
       p{
        border-top: 1px solid #f1f0f0;
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
        color: rgb(60, 60, 175);
      }
    }
    textarea{
        border:none;
        text-indent:6rem;
    }
}
</style>
